<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" pageEncoding="UTF-8" isELIgnored="false" %>
<HTML>
<HEAD>
    <meta http-equiv="Content-Language" content="zh-cn">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link href="${pageContext.request.contextPath}/css/Style1.css" rel="stylesheet" type="text/css"/>
    <script language="javascript" src="${pageContext.request.contextPath}/js/public.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css"
          type="text/css"/>
    <script src="${pageContext.request.contextPath}/js/jquery-1.11.3.min.js"
            type="text/javascript"></script>
    <script src="${pageContext.request.contextPath}/js/bootstrap.min.js"
            type="text/javascript"></script>
    <script type="text/javascript">
        function showDetail(oid) {
            var but = document.getElementById("but" + oid);
            var div1 = document.getElementById("div" + oid);
            if (but.value == "订单详情") {
                // 1.创建异步对象
                var xhr = createXmlHttp();
                // 2.设置监听
                xhr.onreadystatechange = function () {
                    if (xhr.readyState == 4) {
                        if (xhr.status == 200) {

                            div1.innerHTML = xhr.responseText;
                        }
                    }
                }
                // 3.打开连接
                xhr.open("GET", "${pageContext.request.contextPath}/adminOrder_findOrderItem.action?oid="
                    + oid + "&time=" + new Date().getTime(), true);
                // 4.发送
                xhr.send(null);
                but.value = "关闭";
            } else {
                div1.innerHTML = "";
                but.value = "订单详情";
            }

        }

        function createXmlHttp() {
            var xmlHttp;
            try { // Firefox, Opera 8.0+, Safari
                xmlHttp = new XMLHttpRequest();
            }
            catch (e) {
                try {// Internet Explorer
                    xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
                }
                catch (e) {
                    try {
                        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                    }
                    catch (e) {
                    }
                }
            }

            return xmlHttp;
        }
    </script>
</HEAD>
<body>
<br>
<form id="Form1" name="Form1" action="${pageContext.request.contextPath}/user/list.jsp"
      method="post">
    <table cellSpacing="1" cellPadding="0" width="100%" align="center" bgColor="#f5fafe" border="0">
        <TBODY>
        <tr>
            <td class="ta_01" align="center" bgColor="#afd1f3">
                <strong>订单列表</strong>
            </TD>
        </tr>

        <tr>
            <td class="ta_01" align="center" bgColor="#f5fafe">
                <table cellspacing="0" cellpadding="1" rules="all"
                       bordercolor="gray" border="1" id="DataGrid1"
                       style="BORDER-RIGHT: gray 1px solid; BORDER-TOP: gray 1px solid; BORDER-LEFT: gray 1px solid; WIDTH: 100%; WORD-BREAK: break-all; BORDER-BOTTOM: gray 1px solid; BORDER-COLLAPSE: collapse; BACKGROUND-COLOR: #f5fafe; WORD-WRAP: break-word">
                    <tr
                            style="FONT-WEIGHT: bold; FONT-SIZE: 12pt; HEIGHT: 25px; BACKGROUND-COLOR: #afd1f3">

                        <td align="center" width="10%">
                            序号
                        </td>
                        <td align="center" width="10%">
                            订单编号
                        </td>
                        <td align="center" width="10%">
                            订单金额
                        </td>
                        <td align="center" width="10%">
                            收货人
                        </td>
                        <td align="center" width="10%">
                            订单状态
                        </td>
                        <td align="center" width="50%">
                            订单详情
                        </td>
                    </tr>
                    <c:forEach items="${requestScope.page.list}" var="item" varStatus="vs">
                        <tr onmouseover="this.style.backgroundColor = 'white'"
                            onmouseout="this.style.backgroundColor = '#F5FAFE';">
                            <td style="CURSOR: hand; HEIGHT: 22px" align="center"
                                width="18%">
                                    ${vs.count}
                            </td>
                            <td style="CURSOR: hand; HEIGHT: 22px" align="center"
                                width="17%">
                                    ${item.oid}
                            </td>
                            <td style="CURSOR: hand; HEIGHT: 22px" align="center"
                                width="17%">
                                    ${item.total}
                            </td>
                            <td style="CURSOR: hand; HEIGHT: 22px" align="center"
                                width="17%">
                                    ${item.name}
                            </td>
                            <td style="CURSOR: hand; HEIGHT: 22px" align="center"
                                width="17%">
                                <c:if test="${item.state==0}">
                                    未付款
                                </c:if>
                                <c:if test="${item.state==2}">
                                    <a href="${ pageContext.request.contextPath }/adminOrder_updateState.action?oid=<s:property value="#o.oid"/>"><font
                                            color="blue">发货</font></a>
                                </c:if>
                                <c:if test="${item.state==-1}">
                                    已退款
                                </c:if>
                                <c:if test="${item.state==1}">
                                    已付款
                                </c:if>
                            </td>
                            <td align="center" style="HEIGHT: 22px">
                                <input type="button" value="订单详情" id="${item.oid}"
                                       onclick="displayDetail('${item.oid}')"/>
                                <div id="div${item.oid}" class="detailOrder">
                                        <%--<!----%>
                                        <%--订单详情：订单中所有商品名称，单价，总价，数量--%>
                                        <%---->--%>
                                </div>
                            </td>
                        </tr>
                    </c:forEach>
                </table>
            </td>
        </tr>
        </TBODY>
    </table>
    <h3 align="center">
        <ul class="pagination">
            <c:if test="${requestScope.page.pageNum!=1}">
                <li>
                    <a href="${pageContext.request.contextPath}/admin/order/findOrders.do?pageNum=${requestScope.page.pageNum-1}"
                       aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
            </c:if>
            <c:if test="${requestScope.page.pageNum==1}">
                <li>
                    <a href="#" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
            </c:if>
            <!--
            navigateFirstPage    start
            navigateLastPage     end
            -->
            <c:forEach begin="${requestScope.page.navigateFirstPage}"
                       end="${requestScope.page.navigateLastPage}"
                       var="i" step="1">
                <c:if test="${requestScope.page.pageNum==i}">
                    <li class="active"><a
                            href="${pageContext.request.contextPath}/admin/order/findOrders.do?pageNum=${i}">${i}</a>
                    </li>
                </c:if>
                <c:if test="${requestScope.page.pageNum!=i}">
                    <li>
                        <a href="${pageContext.request.contextPath}/admin/order/findOrders.do?pageNum=${i}">${i}</a>
                    </li>
                </c:if>
            </c:forEach>

            <c:if test="${requestScope.page.pageNum!=requestScope.page.pages}">
                <li>
                    <a href="${pageContext.request.contextPath}/admin/order/findOrders.do?pageNum=${requestScope.page.nextPage}"
                       aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
            </c:if>
            <c:if test="${requestScope.page.pageNum==requestScope.page.pages}">
                <li>
                    <a href="#" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
            </c:if>
        </ul>
    </h3>
</form>
<table class="table table-bordered" id="p" style="display:none;">
    <tbody class="">
    <tr class="success">
        <th colspan="5" id="orderNumber">订单编号:
        </th>
    </tr>
    <tr class="warning" id="productTr">
        <th>图片</th>
        <th>商品</th>
        <th>价格</th>
        <th>数量</th>
        <th>小计</th>
    </tr>
    </tbody>
</table>
</body>
<script>
    function displayDetail(oid) {
        if ($("#" + oid).val() == "订单详情") {
            $("#orderNumber").append(
                "<span id='orderOid'>" + oid + "</span>"
            )
            $("#p").show()
            $("#" + oid).val("关闭");
            $("#" + oid).css("color", "red");
            $("#Form1").css("z-index", "-9");
            $("#Form1").css("opacity", "0.5");
            $.ajax(
                {
                    url: "/admin/order/orderItems.do",
                    data: {
                        oid: oid
                    },
                    success: function (obj) {
                        for (var i = 0; i < obj.length; i++) {
                            $("#p").append("" +
                                "<tr class='active' id='pid'>" +
                                " <td width='60' width='40%'>" +
                                "<input type='hidden' name='id' value='22'>" +
                                "<img src=" + "/" + obj[i].product.image + " width='70' height='60' id='imgId'>"
                                +
                                " </td>" +
                                " <td width='30%'>" +
                                " <a target='_blank' id='nameId'></a> " + obj[i].product.name +
                                "</td>" +
                                " <td width='20%' id='shop_priceId'>" + obj[i].product.shopPrice +
                                " </td>" +
                                " <td width='20%' id='countId'>" + obj[i].count +
                                "</td>" +
                                " <td width='20%'> <span class='subtotal' id='xShop_priceId'></span>"
                                + obj[i].subTotal +
                                " </td>" +
                                "</tr>");
                        }

                    }
                }
            )
            $.ajax(
                {
                    url: "/admin/order/findBuyerByOid.do",
                    data: {
                        oid: oid
                    },
                    success: function (order) {
                        $("#orderOid").append("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;买家：" + order.name
                            + "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;总价：" + order.total
                            + "&nbsp;&nbsp;&nbsp;元")
                    }
                }
            )
        }
        else {
            $("#p").hide()
            $("#" + oid).val("订单详情");
            $("#" + oid).css("color", "black");
            $("#pid").remove()
            $("#orderOid").remove()
            $("#Form1").css("z-index", "1");
            $("#Form1").css("opacity", "1");
        }
    }
</script>
</HTML>

